<!DOCTYPE html>

<html lang="ru">

<head>
    {% load static %}
    <link type="image/x-icon" rel="shortcut icon" href="{% static 'flavico.ico' %}">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}Карты{% endblock %}</title>

    <link rel="stylesheet" href="{% static 'bootstrap/5.2.2.min.css' %}">
    {% block links %}
    <link rel="stylesheet" href="{% static 'leaflet/1.6.0.min.css' %}">
    <script src="{% static 'leaflet/1.6.0.min.js' %}"></script>
    {% endblock %}

<style>
html * {
    font-family: 'Inter', sans-serif;
}
.map-background {
    background-image: url('{% static "img/maps/background.png" %}');
    background-repeat: no-repeat;
    height: 450px;
}
.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
}
.logo {
    border: none;
    height: 70px;
    width: 70px;
    animation: 3.75s linear infinite spinner-border;
}
</style>
</head>

<body>

{% block toast %}{% endblock %}

<div class="h-100">

{% include 'menu.html' %}

  <section class="text-center">
      <div id="map" style="height: 450px"></div>

  </section>
    <div class="text-center row py-lg-5">
      <div class="col-lg-6 col-md-8 mx-auto">
          <h1 class="fw-light">Карты</h1>
        <p class="lead text-muted">В данном разделе вы сможете видеть доступные для просмотра интерактивные карты</p>
      </div>
    </div>
  <div class="album py-5 bg-light">
    <div class="container">

      <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3" style="display: flex; justify-content: center;">

          {% for map in maps %}
            <div class="col row-eq-height">
              <div class="card shadow-sm">

                <a href="{% url 'interactive-map-show' map.id %}">
                {% if map.preview_image %}
                    <div style="max-height: 225px; min-height: 225px; background-image: url('{{ map.preview_image.url }}');
                            background-size: cover">
                    </div>
                {% else %}
                    <svg class="bd-placeholder-img card-img-top" width="100%" height="225"
                         xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail"
                         preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title>
                        <rect width="100%" height="100%" fill="#55595c">
                        </rect>
                    </svg>
                {% endif %}
                </a>

                <div class="card-body">
                  <h3 class="card-text">{{ map.name }}</h3>
                  <p class="card-text">{{ map.description }}</p>
                  <div class="d-flex justify-content-between align-items-center">
                  </div>
                </div>
              </div>
            </div>
          {% empty %}
              <h1 class="fw-light text-center">Нет доступных карт</h1>
          {% endfor %}

      </div>
    </div>
  </div>


{# FOOTER #}
<div class="container">
{% block footer %}
{% include 'footer.html' %}
{% endblock %}
</div>

</div>
{% block js %}
<script>
const osm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png");
const map = L.map("map", { layers: [osm], minZoom: 5 }).setView([44.61, 33.5], 13);
</script>
{% endblock %}

</body>

</html>